<template>
  <div>
    <childVue abc="123">
      <h3>我是外面组件传递进来的html结构</h3>
      <!-- <div slot="header">我是具名插槽的内容</div> -->
      <template #header>
        <div>我是具名插槽的内容</div>
      </template>

      <!-- 下面是作用域插槽 -->
      <template #foot="{abc, list}">
        <div>{{ abc }}, {{ list }}</div>
      </template>

      <!-- element-ui官网都是传统的写法 -->
      <div slot="foot" slot-scope="props">
        {{ props }}
      </div>

    </childVue>

    <el-tree :data="data" :props="defaultProps">
      <div>123</div>
    </el-tree>
  </div>
</template>

<script>
import childVue from './child.vue'
export default {
  name: 'DepartmentCom',
  components: { childVue },
  data() {
    return {
      data: [{
        abc: '一级 1',
        aaa: '测试1',
        children: [{
          abc: '二级 1-1',
          aaa: '测试2',
          children: [{
            abc: '三级 1-1-1',
            aaa: '测试3'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'aaa'
      }
    }
  }
}
</script>
